<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { FormInstance } from 'element-plus'
import { queryBoxOperationRequestData, queryBoxOperationTableCol } from '@/api/record/types/record'
import { queryBoxOperation } from '@/api/record'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import { BoxOperationType } from '@/types/enum'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'CabinetRecordList'
})
const form = reactive<queryBoxOperationRequestData>({
  boxCode: '',
  type: ''
})
const router = useRouter()
const formRef = ref<FormInstance | null>(null)
const { pagination, data, loading, handleSizeChange, handleCurrentChange, setCurrentPage, load } =
  useTable<queryBoxOperationTableCol>(queryBoxOperation, getToken() ?? '', () => form)
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
const reset = () => {
  formRef.value?.resetFields()
}
const changeType = (val: BoxOperationType) => {
  if (val == 'newBattery') {
    return '领电池'
  } else if (val == 'changeBattery') {
    return '换电池'
  } else if (val == 'returnBattery') {
    return '归还电池'
  } else if (val == 'fault') {
    return '故障上报'
  } else if (val == 'lockBox') {
    return '电柜上锁'
  } else if (val == 'unlockBox') {
    return '电柜开锁'
  } else if (val == 'maintenanceDoor') {
    return '维护仓门'
  } else {
    return ''
  }
}
const boxLocation = (row: queryBoxOperationTableCol) => {
  router.push({
    name: 'CabinetLocation',
    query: {
      longtitude: row.longtitude,
      latitude: row.latitude,
      boxId: row.boxId
    }
  })
}
onMounted(() => {
  load()
})
</script>

<template>
  <div class="xy-container">
    <el-form inline ref="formRef" :model="form">
      <el-form-item prop="boxCode" label="电柜编号">
        <el-input v-model="form.boxCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="type" label="操作内容">
        <el-select v-model="form.type" style="width: 150px">
          <el-option label="不限" value="" />
          <el-option value="newBattery" label="领电池" />
          <el-option value="changeBattery" label="换电池" />
          <el-option value="returnBattery" label="归还电池" />
          <el-option value="fault" label="故障上报" />
          <el-option value="lockBox" label="电柜上锁" />
          <el-option value="unlockBox" label="电柜开锁" />
          <el-option value="maintenanceDoor" label="维护仓门" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleFormSearch">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="data" v-loading="loading" class="no-border">
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="boxCode" label="电柜编号" align="center" />
      <el-table-column prop="type" label="操作内容" align="center">
        <template #default="scope">
          <span>{{ changeType(scope.row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作人" align="center" />
      <el-table-column prop="createdTime" label="操作时间" sortable align="center">
        <template #default="scope">
          <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
      <el-table-column label="电柜位置" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            link
            class="is-open"
            @click="boxLocation(scope.row)"
            v-if="+scope.row.longtitude && scope.row.longtitude !== '0.65535'"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
